 <!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>{$Think.config.site.title} - 管家管理</title>
    <meta name="keywords" content="{$Think.config.site.keywords}">
    <link href="{$Think.config.site.resource_url}css/bootstrap.min.css?v=3.3.5" rel="stylesheet">
    <link href="{$Think.config.site.resource_url}css/font-awesome.min.css?v=4.4.0" rel="stylesheet">
    <link href="{$Think.config.site.resource_url}css/plugins/iCheck/custom.css" rel="stylesheet">
    <link href="{$Think.config.site.resource_url}css/animate.min.css" rel="stylesheet">
    <link href="{$Think.config.site.resource_url}css/style.min.css?v=4.0.0" rel="stylesheet">
</head>
<style>
ul{margin: 0;padding: 0;}
ul li{list-style: none;}

.clear{clear: both;}

.hbox{ width: 100%; height: 39px; background: #fff; position: fixed; left: 0; top: 20px; box-shadow: 0 1px 20px #eee;z-index: 9;}
.hbox ul{}
.hbox ul li{ display: inline-block; padding: 0 18px; height: 40px; line-height: 40px; color: #333}
.hbox ul li.active{border-bottom: solid 2px rgb(13, 190, 8); color: rgb(13, 190, 8)}
.hbox .scroll-box{width: 100%; overflow-x: scroll; overflow-y: hidden; white-space: nowrap;}
.nav-hbox{height: 39px; overflow: hidden;}

.cbox{ width: 100%; position: absolute; left: 0; top: 98px; bottom: 0px; background: #333 }
.cbox-r{position: relative;  width: 100%; height: 100%}

.nav-cbox {background: #EEE; width: 130px; left: 0; top: 0; height: 100%; position: absolute; overflow: hidden;}
.nav-cbox  .scroll-box{overflow-y: auto; overflow-x: hidden; width: 140px; height: 100%;}
.nav-cbox ul{}
.nav-cbox ul li{ padding: 8px 10px; cursor: pointer;}
.nav-cbox ul li.active{background: #fff}
.scroll-box ul li{cursor: pointer; z-index: 1000}

.goods-cbox{ position: absolute; left: 0px; top: 0px; right: 0px; height: 100%; background: #fff  }

.cbox-nav{width: 100%; position: absolute; top: 0; left: 0; height: 40px; overflow: hidden; border-bottom: 1px solid rgb(13, 190, 8)}
.cbox-nav ul li{ display: inline-block; padding: 0 18px; height: 40px; line-height: 40px; color: #333;cursor: pointer; z-index: 1000}
.cbox-nav ul li.active{color: #fff; background: rgb(13, 190, 8)}
.cbox-nav .scroll-box-nav{width: 100%; overflow-x: scroll; overflow-y: hidden; white-space: nowrap;}

.goods-cbox-c{position: absolute; width: 100%; top: 40px; left: 0; bottom: 0; overflow: hidden;}
.goods-list-box{ width: 100%; height: 100%; overflow-x: hidden; overflow-y: auto; padding: 10px 0 10px 10px;}

.list-cate{border-left: 2px solid sandybrown; padding-left: 5px; margin: 10px 0px}

.list-goods{border-bottom: 1px solid #eee; overflow: auto; padding: 8px 0 0;}
.goods-info{ margin-bottom: 8px;}
.goods-info .imgbox{width: 40%; float: left;}
.goods-info .imgbox img{width: 100%;}
.goods-info .info{ width: 60%; float: left; padding-left: 10px;}
.goods-info .info button{float: right;}
.mbtn{margin-top: 5px;}
.mbtn button{float: right;}
.addfreqlist{    margin-top: 4px; display: inline-block; color: rgb(13, 190, 8); cursor: pointer;}

.goods-spec-list{align-items:center; border-top: 1px solid #ccc; padding: 8px 0 0; background: rgb(253, 253, 253);display: none;}
.list-goods.active .goods-spec-list{ display:-webkit-box; display:-webkit-flex; display:flex; }

.goods-spec-list .info{-webkit-box-flex:1;-webkit-flex:1;flex:1; padding-left: 8px;}
.bmr{margin-right: 10px;}

#cbox-scroll-box ul{display: none;}
#cbox-scroll-box ul li.active{background: #fff; border:none; color: rgb(13, 190, 8)}

.price{overflow: hidden;}

.btn-primary.active, .btn-primary:active, .btn-primary:focus, .btn-primary:hover, .open .dropdown-toggle.btn-primary{
	background-color: #0dbe08;
    border-color: #0dbe08;
    color: #FFF;
}
.btn-primary {
    background-color: #0dbe08;
    border-color: #0dbe08;
    color: #FFF;
}
.brand{display: inline-block;
    padding: 0px 5px;
    background: #f1b348;
    border-radius: 5px;
    font-size: 12px;
    color: #fff;}
p.name{display: inline-block;
    margin-left: 10px;
    font-size: 14px;}

a{color: #666}
</style>
<body class="gray-bg">
	<div class="mbody">
		{include file='public/userinfo' /}
		<div class="hbox">
			<div class="nav-hbox">
				<div class="scroll-box" id="hbox-scroll-box">
					<ul >
						{volist name="cate" id="vo"}
							<li>{$vo.cate_name}</li>
						{/volist}
					</ul>
				</div>
			</div>
			<div class="nav-hbox">
				<div class="scroll-box" id="cbox-scroll-box">
					{volist name="cate" id="vo"}
						<ul>
							{volist name="vo['_child']" id="voo"}
								<li data-id="{$voo.cate_id}">{$voo.cate_name}</li>
							{/volist}
						</ul>
					{/volist}
				</div>
			</div>
		</div>
		<div class="cbox">
			<div class="cbox-r">
				<div class="goods-cbox">
					<div class="cbox-nav">
						<div class="scroll-box-nav" id="cbox-scroll-box-nav">
							<ul ></ul>
						</div>
					</div>
					<div class="goods-cbox-c">
						<div class="goods-list-box">
		
						</div>
					</div>
				</div>
			</div>
		</div>
	</div>
	
    <script src="{$Think.config.site.resource_url}js/jquery.min.js?v=2.1.4"></script>
    <script src="{$Think.config.site.resource_url}js/bootstrap.min.js?v=3.3.5"></script>
    <script src="{$Think.config.site.resource_url}js/plugins/layer/layer.js"></script>
    <script src="{$Think.config.site.common_resource_url}js/majax.js"></script>
    <script src="{$Think.config.site.common_resource_url}js/jedit.js"></script>
    {include file='public/search' /}
    {include file='public/footer' /}
</body>
<style type="text/css">
.mloder_circle{
	animation:circle 1s infinite linear;/*匀速 循环*/
	-webkit-animation:circle 1s infinite linear;/*匀速 循环*/
}
	
@-webkit-keyframes circle{
	0%{ transform:rotate(0deg); -webkit-transform:rotate(0deg);}
	100%{ transform:rotate(360deg);  -webkit-transform:rotate(360deg);}
}
.mloder{display: none;}
</style>
</html>
<script>

//頂部導航點擊事件
$('body').delegate('#hbox-scroll-box ul li','click',function(){
	//滾動
	$(this).addClass('active').siblings('li').removeClass('active');
	var dw = $(document).width(),
		offset = $(this).position(),
		tw = $(this).width(),
		sl = $('#hbox-scroll-box').scrollLeft();
	var m = dw/2-(offset.left+tw/2)
	$('#hbox-scroll-box').animate({scrollLeft: sl-m}, 300);

	var cul = $('#cbox-scroll-box ul').eq($(this).index());
	cul.show().siblings('ul').hide();
	//點擊第一個li
	cul.find('li:eq(0)').click();
})

//三級導航點擊事件
$('body').delegate('#cbox-scroll-box-nav li','click',function(){
	// $(this).addClass('active').siblings('li').removeClass('active');
	// var dw = $(this).closest('.goods-cbox').width(),
	// 	offset = $(this).position(),
	// 	tw = $(this).width(),
	// 	sl = $('#cbox-scroll-box-nav').scrollLeft();
	// var m = dw/2-(offset.left+tw/2)
	// $('#cbox-scroll-box-nav').animate({scrollLeft: sl-m}, 300);
	scrollgoods($(this));
	var id = $(this).data('id');
	$(".goods-list-box").stop(true);
	var sl = $('#cate_'+id).position().top+$('.goods-list-box').scrollTop();
	$(".goods-list-box").animate({scrollTop: sl}, 1000);
})

function scrollgoods(o){
	o.addClass('active').siblings('li').removeClass('active');
	var dw = o.closest('.goods-cbox').width(),
		offset = o.position(),
		tw = o.width(),
		sl = $('#cbox-scroll-box-nav').scrollLeft();
	var m = dw/2-(offset.left+tw/2)
	$('#cbox-scroll-box-nav').stop().animate({scrollLeft: sl-m}, 300);
}

//左側導航點擊事件
$('body').delegate('#cbox-scroll-box li','click',function(){
	$(this).addClass('active').siblings('li').removeClass('active');
	var dw = $(document).width(),
		offset = $(this).position(),
		tw = $(this).width(),
		sl = $('#cbox-scroll-box').scrollLeft();
	var m = dw/2-(offset.left+tw/2)
	$('#cbox-scroll-box').animate({scrollLeft: sl-m}, 300);

	var cate_id = $(this).data('id');
	//異步請求商品
	majax('{:url("goods",["shop_id"=>$shop_id])}',{cate_id:cate_id},function(d){
		formatGoods(d.data);
		$('#cbox-scroll-box-nav li:eq(0)').click();
	})
})
var scrolltime=null;
//滚动事件
$('.goods-list-box').scroll(function(e){
	clearTimeout(scrolltime);
	scrolltime = setTimeout(function(){
		test();
	},600)
})

function test(){
	var id=null,top=0;
	$('.goods-list-box .list-cate').each(function(){
		if (id==null) {
			id=$(this).data('id');
			top=Math.abs($(this).position().top);
		}else{
			if (top>Math.abs($(this).position().top)) {
				id=$(this).data('id');
				top=Math.abs($(this).position().top);
			}
		}
	})

	if (id!=null && !$('#cbox-scroll-box-nav li[data-id="'+id+'"]').hasClass('active')) {
		scrollgoods($('#cbox-scroll-box-nav li[data-id="'+id+'"]'));
	}
}

function formatGoods(d) {
	$('#cbox-scroll-box-nav ul').html('');
	$('.goods-list-box').html('');
	var cate3 = '',goods='';
	for (var i = 0; i < d.length ; i++) {
		if (d[i].is_title) { //三級分類
			cate3 += '<li data-id="'+d[i].cate_id+'">'+d[i].title+'</li>';
			goods += '<div class="list-cate" id="cate_'+d[i].cate_id+'" data-id="'+d[i].cate_id+'">'+d[i].title+'</div>';
		}else{ //商品
			goods += '<div class="list-goods">\
						<div class="goods-info">\
							<a href="{:url('Mall/goodsDetail',['shop_id'=>$shop_id],null)}/goods_id/'+d[i].goods_id+'">\
							<div class="imgbox">\
								<img src="'+d[i].picture+'">\
							</div>\
							<div class="info">\
								<span class="brand">'+d[i].brand_name+'</span><p class="name">'+d[i].goods_name+'</p>';
			if (d[i].list.length===1) {
				goods += '<p class="price"><span>'+d[i].unit_price+'</span>/'+d[i].unit+'</p></div></a>\
							<div class="clear"></div>\
							<div class="mbtn">\
							<span class="addfreqlist" data-goods_id="'+d[i].list[0].goods_id+'"><i class="fa fa-calendar-plus-o"></i>  加入清单</span>\
							<button class="btn btn-primary btn-xs bmr addcart" data-open="false" data-specval_id="'+d[i].list[0].specval_id+'"  data-goods_id="'+d[i].list[0].goods_id+'"><i class="mloder"><i class="fa fa-refresh mloder_circle"></i></i><span class="by">购买</span></button></div>\
							<div class="clear"></div>\
						</div></div>';
			}else{
				goods += '<p class="price"><span>'+d[i].unit_price+'</span>/'+d[i].unit+'</p></div></a>\
							<div class="clear"></div>\
							<div class="mbtn">\
							<span class="addfreqlist" data-goods_id="'+d[i].list[0].goods_id+'"><i class="fa fa-calendar-plus-o"></i>  加入清单</span>\
							<button class="btn btn-primary btn-xs bmr xgg" data-open="false">选规格</button></div>\
						</div>\
						<div class="clear"></div>';

						for (var j = 0; j<d[i].list.length; j++) {
							
							goods += '<div class="goods-spec-list">\
										<div class="info">\
											<p class="price"><span>'+d[i].list[j].price+'</span>/'+d[i].list[j].spec_name+'('+d[i].list[j].specval_name+')</p>\
											<p class="price"><span>'+d[i].list[j].unit_price+'</span>/'+d[i].list[j].unit+'</p>\
										</div>\
										<button class="btn btn-primary btn-xs bmr addcart"  data-specval_id="'+d[i].list[j].specval_id+'" data-goods_id="'+d[i].list[j].goods_id+'"><i class="mloder"><i class="fa fa-refresh mloder_circle"></i></i><i class="fa fa-plus by"></i></button>\
										<div class="clear"></div>\
									</div>';
						}
						
				goods += '</div>';
			}
						
		}
	}

	$('#cbox-scroll-box-nav ul').append(cate3);
	$('.goods-list-box').append(goods);
}

$('body').delegate('.xgg','click',function(){
	var o = $(this);
	if (o.data('open')) {
		o.closest('.list-goods').removeClass('active');
		o.text('选规格');
		o.data('open',false);
	}else{
		o.closest('.list-goods').addClass('active');
		o.text('收起');
		o.data('open',true);
	}
})

$('body').delegate('.addcart','click',function(){
	var specval_id = $(this).data('specval_id'),goods_id = $(this).data('goods_id'),o=$(this);
	o.find('.by').hide();
	o.find('.mloder').show();
	o.removeClass('btn-primary');
	o.removeClass('addcart');
	majax('{:url("Cart/edit",["shop_id"=>$shop_id])}',{specval_id:specval_id,goods_id:goods_id},function(d){
		o.find('.by').show();
		o.find('.mloder').hide();
		o.addClass('btn-primary');
		o.addClass('addcart');
		if (d.code>0) {
			var cartNum = parseInt($('.cartNum').text());
			if (isNaN(cartNum)) {cartNum=0}
			$('.cartNum').show().text(cartNum+1);
		}else{

		}
	},{autoload:false,automsg:false})
})

$('body').delegate('.addfreqlist','click',function(){
	var goods_id = $(this).data('goods_id'),o=$(this);
	
	majax('{:url("Freqlist/add_freq",["shop_id"=>$shop_id])}',{goods_id:goods_id},function(d){
		layer.msg(d.msg)
	},{autoload:false,automsg:false})
})

$(function(){
	//默認點擊第一個分類
	$('#hbox-scroll-box ul li:eq(0)').click();
})
</script>